<div class="top-bg">
  <div class="index-top">
    <div class="back" (click)="back()">
      <img src="../../../assets/icons/back2.png" alt="">
    </div>
    <p>{{'mh-del-Page.html1' | translate}}</p>
  </div>

  <div class="xq-body">
    <div class="xq-body-top">
      <div class="xq-body-top-up">
        <img src="{del?.thumbnail}" alt="">
        <div class="up-text" (click)='onSel(del)'>
          <em>{{del.name}}</em>
          <p>{{del.briefInfo}}</p>
          <img src="../../../assets/images/guide-page/play.png" alt="">
        </div>
      </div>
      <div class="xq-body-top-star">
        <weui-rating [(ngModel)]="del.levelStar" [config]="customIconsAndClassCog" [readonly]="true"></weui-rating>
        <!-- <p>1813条留言</p> -->
      </div>
    </div>

    <div class="xq-body-top">
      <h1 class="titel">{{'mh-del-Page.html2' | translate}}</h1>
      <div class="swiper-c" [ngClass]="'swiper'">
        <weui-swiper #swiper [options]="options">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" *ngFor="let i of imgs">
                <img style="width: 100%;height:98%" src="{{i}}" alt="">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </weui-swiper>
      </div>
    </div>

    <div class="xq-body-top">
      <h1 class="titel">{{'mh-del-Page.html3' | translate}}</h1>
      <div class="mh-over">
        <div class="slide" *ngFor="let item of zhangJieList" (click)="onSelZhangJie(item)">
          <img style="width: 100%;height:98%" src="{{item.thumbnail}}" alt="">
          <div class="slide-text">
            <p>{{item.chapterName}} </p>
            <a>{{item.price}} {{'mh-del-Page.html6' | translate}}</a>
          </div>
        </div>
        <div class="more" routerLink="/mhList" [queryParams]='{cartoonId:del.id}'>
          <h2>{{'mh-del-Page.html4' | translate}}</h2>
          <p>{{'mh-del-Page.html5' | translate}} ></p>
        </div>
      </div>
    </div>
  </div>

  <div class="fixed-box" *ngIf='showDailog'>
    <div class="pay-dailog">
      <div class="title">
        <div (click)='showDailog = false'>
          <img src="../../../../assets/icons/closeIcon.png" alt="">
        </div>
        <h1>{{'pay.html1' | translate}}</h1>
      </div>
      <div class="pay-dailog-title">
        <h3>
          <font style="font-size: 4.25rem;">{{payData.price}}</font> {{'pay.html2' | translate}}
        </h3>
      </div>

      <div class=" weui-cells_radio">
        <label class="weui-cell weui-check__label" for="radio-{{ i.id }}" *ngFor="let i of radio">
          <div class="weui-cell__bd">
            <p>{{ i.name }}</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" class="weui-check" [(ngModel)]="radioType" name="radio1" [value]="i"
              id="radio-{{ i.id }}" />
            <span class="weui-icon-checkedd"></span>
          </div>
        </label>
      </div>

      <div class="help">
        <div>
          <img src="../../../../assets/icons/wh.png" alt="">
          <span style="margin-left: 1rem; font-size: 1.875rem;color: #CCCCCC;">{{'pay.html3' | translate}}</span>
        </div>
        <div style="font-size: 1.5rem; background: #F9F9F9;padding: 1rem;">
          <p>{{'pay.html4' | translate}} </p>
          <p>{{'pay.html5' | translate}}</p>
        </div>
      </div>
      <div class="pay">
        <!-- <h3>支付密码</h3> -->
        <pay-password [(ngModel)]="payData.tradePw"></pay-password>
      </div>

      <div class="btn">
        <a class="l" (click)='toPay()'>{{'pay.html6' | translate}}</a>
      </div>
    </div>
  </div>

</div>